<script setup>
import columFoldLine from '../columFoldLine/columFoldLine.vue'
import barChart from '../barChart/barChart.vue'
import scrollTable from '../../../components/scrollTable.vue'
import kChart from '../kChart/kChart.vue'
import {reactive, ref} from "vue";
import {storeToRefs} from 'pinia'
import {useResultTech} from '../../../stores/result-technical.js'
const activeNames = ref(['0']);
const techStore = useResultTech();
const  {
  st_kchart,
  st_cfl1,
  st_cfl2,
  st_bct1,
  st_bct2,
  tableRte,
  tableRte2,
} = storeToRefs(techStore)


</script>
<template>
  <van-collapse v-model="activeNames" :accordion="false">
    <van-collapse-item title="主力资金流出" name="1" value="净流出1209.12万元">
      <div class="matter">
        <div class="matter_dep">
          7月10日，近5日主力资金净流出6334.38万元，在全市场排名为22/4050，每日净流出额占流通市值比例累计为5.36%，请注意主力资金流出风险。
        </div>
      </div>
      <columFoldLine :id="st_cfl1.id" :categories="st_cfl1.categories" :series="st_cfl1.series"/>
    </van-collapse-item>
    <van-collapse-item title="北向资金流出" name="2" value="净流出1309.12万元">
      <div class="matter">
        <div class="matter__dep">
          7月10日，近5日北向资金净流出6334.38万元，在全市场排名为22/4050，每日净流出额占流通市值比例累计为5.36%，请注意北向资金流出风险。
        </div>
      </div>
      <columFoldLine :id="st_cfl2.id" :categories="st_cfl2.categories" :series="st_cfl2.series"/>
    </van-collapse-item>
    <van-collapse-item title="交易龙虎榜" name="3" value="7则公告">
      <div class="matter">
        <div class="matter__dep">
          近一周2次上龙虎榜，1次为净出
        </div>
      </div>
      <div class="mtable">
        <scrollTable :titleList="tableRte.titleList" :dataList="tableRte.dataList" />
      </div>
    </van-collapse-item>
    <van-collapse-item title="大宗交易" name="4" value="3则公告">
      <div class="mt">
        <scrollTable :titleList="tableRte2.titleList" :dataList="tableRte2.dataList" />
      </div>
    </van-collapse-item>
    <van-collapse-item title="融资融券" name="5" value="3则公告">
      <div class="matter">
        <div class="matter__tit">融资余额</div>
        <div class="matter__dep">
          融资余额为24.38亿，相对上周减少25.55%
        </div>
      </div>
      <barChart :id="st_bct1.id" :categories="st_bct1.categories" :series="st_bct1.series"/>
      <div class="matter">
        <div class="matter__tit">融券余额</div>
        <div class="matter__dep">
          融资余额为24.38亿，相对上周减少35.55%
        </div>
      </div>
      <barChart :id="st_bct2.id" :categories="st_bct2.categories" :series="st_bct2.series"/>
    </van-collapse-item>
    <van-collapse-item title="股价创新低" name="6" value="股价创近60日新低">
      <div class="stepContainer">
        <van-steps direction="vertical" active="none" inactive-color="#ccc">
          <van-step v-for="item in 2">
            <h3>关于法院裁定受理公司重整的公告</h3>
            <div class="tags">
              <van-space size="6px">
                <van-tag type="danger">监管处罚</van-tag>
                <van-tag type="danger">平仓风险</van-tag>
              </van-space>
            </div>
          </van-step>
        </van-steps>
      </div>
<!--      ===股票图表===-->
      <kChart :id="st_kchart.id" :categories="st_kchart.categories" :series="st_kchart.series" />
    </van-collapse-item>
    <van-collapse-item title="历史波动率" name="7" value="3则公告">
      <div class="matter">
        <div class="matter__dep">
          近1年，历史波动率94.53%，全市场排名11/4300,股价大幅波动，请关注股价异常波动风险。
        </div>
      </div>
    </van-collapse-item>
    <van-collapse-item title="换手率" name="8" value="3则公告">
      <div class="matter">
        <div class="matter__dep">
          最近20日日均换手率/60日日均换手率为1.23,
          全市场排名22/3050,流动性差，请注意流动性风险。
        </div>
      </div>
    </van-collapse-item>
  </van-collapse>
</template>

<style scoped lang="scss">

</style>